<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">编辑术语</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar style="height:100%">
            <MenuItem v-for="(item, index) in CONST.TERM_ITEMS" :key="index" :item="item"
                      :reorder="false" @change-selection="refreshList"></MenuItem>
          </el-scrollbar>
        </el-aside>
        <el-main :style="{height: mainHeight + 'px'}">
          <div>
            <a name="术语正名"></a>
            <div><span>术语正名</span><span style="color: red;">*</span></div>
            <div style="margin-top: 10px; width: 255px">
              <KindEditor :content.sync="termDetailData.name" editor-type="Input"></KindEditor>
            </div>
          </div>

          <div v-for="(display, prop) in CONST.TERM_PROPERTY" :key="prop" style="margin-bottom: 10px;margin-top: 10px ">
            <a :name="display"></a>
            <div v-html="display"></div>
            <div style="margin-top: 10px">
              <MultiValueBox :fieldValue.sync="termDetailData[prop]"/>
            </div>
          </div>

          <div style="margin-bottom: 10px;">
            <a name="同义词"></a>
            <div><span>同义词</span></div>
            <div style="margin-top: 10px;margin-left: 40px">
              <div v-for="(synonym, index) in termDetailData.termList" :key="index">
                <div>
                  <div>{{ termSynonymName[synonym.type] }}</div>
                  <div style="margin-top: 10px; width: 255px">
                    <KindEditor :content.sync="synonym.name" editor-type="Input"></KindEditor>
                  </div>
                </div>
                <div v-for="(display, prop) in CONST.TERM_PROPERTY" :key="prop"
                     style="margin-bottom: 10px;margin-top: 10px ">
                  <a :name="display"></a>
                  <div v-html="display"></div>
                  <div style="margin-top: 10px">
                    <MultiValueBox :fieldValue.sync="synonym[prop]"/>
                  </div>
                </div>
                <hr>
                <div class="line vertical-align-top">
                  <el-button icon="el-icon-plus" plain size="small" type="primary" @click="dialogVisibleClick()">
                    新增
                  </el-button>
                  <el-button icon="el-icon-minus" plain size="small" type="danger" @click="del(index)">删除</el-button>
                </div>
              </div>

              <div v-if="termDetailData.termList.length <= 0" class="line vertical-align-top">
                <el-button icon="el-icon-plus" plain size="small" type="primary" @click="dialogVisibleClick()">
                  新增
                </el-button>
                <el-button v-if="termDetailData.termList.length > 0" icon="el-icon-minus" plain size="small"
                           type="danger" @click="del(index)">删除
                </el-button>
              </div>
            </div>
          </div>

          <div>
            <div>
              <span>释义</span>
            </div>
            <div>
              <div v-for="(pa, index) in termDetailData.explanation" :idx="index">
                <div style="display: inline-block;width: 500px">
                  <KindEditor :content.sync="termDetailData.explanation[index]" editor-type="Textarea"></KindEditor>
                </div>
                <div style="display: inline-block; vertical-align: top; ">
                  <el-button v-if="termDetailData.explanation.length > 1" circle icon="el-icon-minus" plain
                             type="danger"
                             @click="termDetailData.explanation.splice(index, 1)"></el-button>
                  <el-button v-if="index === termDetailData.explanation.length - 1" circle icon="el-icon-plus" plain
                             type="success"
                             @click="termDetailData.explanation.push('')"></el-button>
                </div>
              </div>
            </div>
            <el-button v-if="UTIL.isNotEmpty(termDetailData.explanation) && termDetailData.explanation.length == 0"
                       circle icon="el-icon-plus" plain
                       type="success"
                       @click="termDetailData.explanation.push('')"></el-button>
          </div>

          <div>
            <div>
              <span>术语来源</span>
            </div>
            <div>
              <span v-html="termDetailData.nameSource"></span>
            </div>
          </div>

        </el-main>

      </el-container>
      <el-footer height="30">
        <div style="border-top: solid 1px #C9C9C9; position: relative">
          <div style="float: right; margin-top: 10px;">
            <el-button size="small" @click="goBack">取 消</el-button>
            <el-button size="small" type="success" @click="termUpdateById()">
              保存
            </el-button>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog :visible.sync="dialogVisible" title="" width="500px" @click="closeNewDialog">
      <div>
        <div><span>请选择名称</span></div>
        <div style="margin-top: 10px">
          <el-select v-model="value" clearable placeholder="例如又称，曾称，旧称，简称，全称" style="width: 300px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeNewDialog">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import Headline from "../knowledge/knowledgeEdit/Headline";
import KindEditor from "../kindeditor/KindEditor";
import MenuItem from "../common/MenuItem";
import MultiValueBox from "../knowledge/knowledgeEdit/MultiValueBox"

export default {
  components: {
    Headline,
    KindEditor,
    MenuItem,
    MultiValueBox,
  },
  name: "Update",
  data() {
    return {
      dialogVisible: false,
      mainHeight: 0,
      termDetailData: {
        termList: [],
        englishName: [],
        englishAbbr: [],
        frenchName: [],
        russianName: [],
        germanName: [],
        japaneseName: []
      },
      propMap: {
        name: '名称',
        englishName: '英文名称',
        englishAbbr: '英文简称',
      },
      options: [{
        value: 1,
        label: '正名1'
      }, {
        value: 2,
        label: '正名2'
      }, {
        value: 3,
        label: '又称'
      }, {
        value: 4,
        label: '曾称'
      }, {
        value: 5,
        label: '旧称'
      }, {
        value: 6,
        label: '通称'
      }, {
        value: 7,
        label: '简称'
      }, {
        value: 8,
        label: '全称'
      }, {
        value: 9,
        label: '正名3'
      }],
      value: '',
      termSynonymName: {}
    }
  },
  methods: {
    termUpdateById() {
      let nameArray = [];
      let term = JSON.parse(JSON.stringify(this.termDetailData));
      if (term.name === '') {
        this.$message.error('术语正名不能为空');
        return;
      }
      // 判断新增的术语和同义词是否重复
      nameArray.push(term.name);
      this.arrayToStr(term);
      for (let i = 0; i < term.termList.length; i++) {
        nameArray.push(term.termList[i].name);
        this.arrayToStr(term.termList[i]);
      }
      let textList = nameArray.filter((item, index, arr) => arr.indexOf(item, 0) === index);
      if (nameArray.length != textList.length) {
        this.$message.warning('正名或同义词重复');
        return;
      }
      this.axios.post('/pmph/action/term/termUpdateById', term)
        .then(() => {
          this.goBack();
        })
    },
    refreshList(item) {
      window.location.href = '#' + item.name;
      this.setAllItemsUnselected();
      this.setSelectedItem(item)
    },
    setAllItemsUnselected() {
      CONST.TERM_ITEMS.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      CONST.TERM_ITEMS.forEach(item => {
        if (item.id === selectedItem.id) {
          item.selected = true;
        }
      });
    },
    goBack: function () {
      this.$router.push("/term/bookTermDetail");
    },
    dialogVisibleClick() {
      this.dialogVisible = true
    },
    del(index) {
      this.termDetailData.termList.splice(index, 1)
    },
    closeNewDialog() {
      this.dialogVisible = false
    },
    confirm() {
      this.termDetailData.termList.push({
        conceptId: this.$route.query.conceptId,
        type: this.value,
        name: '',
        englishAbbr: [],
        englishName: [],
        frenchName: [],
        russianName: [],
        germanName: [],
        japaneseName: [],
        status: this.termDetailData.status,
        xmlClassify: this.termDetailData.xmlClassify
      })
      this.dialogVisible = false
      this.value = ''
    },
    strToArray(obj) {
      for (let key of Object.keys(CONST.TERM_PROPERTY)) {
        obj[key] = UTIL.isEmpty(obj[key]) ? [] : obj[key].split(";");
      }
    },
    arrayToStr(obj) {
      for (let key of Object.keys(CONST.TERM_PROPERTY)) {
        obj[key] = obj[key].join(';');
      }
    },
    getTermSynonymName() {
      this.$store.state.ruleList.filter(item => item.id === '18')[0].ruleItemList.forEach(item => {
        let key = item.idx;
        this.termSynonymName[key] = item.name;
      })
    }
  },
  created() {
    // 计算内容区域的高度
    this.mainHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.getTermSynonymName();
    this.axios.get('/pmph/action/term/selectDetailTermById', {
      params: {
        originalConceptId: this.$route.query.originalConceptId
      }
    }).then((response) => {
      this.termDetailData = response.data;
      this.strToArray(this.termDetailData);
      for (let i = 0; i < this.termDetailData.termList.length; i++) {
        this.strToArray(this.termDetailData.termList[i]);
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    to.meta.isUseCache = false;
    next();
  },
}
</script>

<style scoped>
/* 子组件textarea, 指定字体 */
/deep/ textarea {
  font-family: 'Microsoft YaHei', serif
}

/* 不显示div的滚动条 */
::-webkit-scrollbar {
  display: none
}

.el-row {
  margin: 5px 0px;
}

.el-col {
  line-height: 35px;
}

.row-label {
  text-align: right;
  margin-right: 10px;
  margin-top: 8px;
}

.inline-block {
  display: inline-block;
}

.el-main {
  padding: 5px 20px 20px;
}

.label {
  float: left;
}
</style>
